<template>
  <footer class="pagefooter" id="pagefooter">
    <!-- 导航 & 图标 -->
    <section class="nav">
      <div class="left">
        <!-- 关于 -->
        <div class="item">
          <h3 v-text="lang.footOn"></h3>
          <p><router-link to="/help/about">{{lang['footaboutUs']}}</router-link></p>
          <p><router-link to="/news/index">{{lang['index_Footer_News']}}</router-link></p>
          <p><router-link to="/news/announcement">{{lang['announcement Center']}}</router-link></p>
        </div>
        <!-- 服务 -->
        <div class="item">
          <h3 v-text="lang.index_Footer_Sever"></h3>
          <p v-show="langKey === 'zh-CN'">
            <a href="http://cn.mikecrm.com/7cI78c8" target="_blank">{{lang['Coin Listing Application']}}</a>
          </p>
          <p><router-link to="/api/list">{{lang['api document']}}</router-link></p>
          <p><router-link to="/help/rate">{{lang.footRate}}</router-link></p>
        </div>
        <!-- 其他 -->
        <div class="item">
          <h3 v-text="lang.index_Footer_Others"></h3>
          <p v-show="langKey !== 'zh-CN'">
            <a href="https://docs.google.com/forms/d/1epvl6I4sF_chdAV5FraxXrifXYDiwb91gTx3fy788GY/viewform?edit_requested=true&pli=1" target="_blank">{{lang['Coin Listing Application']}}</a>
          </p>
          <p><router-link to="/help">{{lang['footHelpCenter']}}</router-link></p>
          <p v-for="item in protocolList" v-if="protocolList.length > 0" :key="item.ID"><router-link :to="{path: '/help/' + `${item.Keywords}`}">{{item.Name}}</router-link></p>
          <!-- <p><router-link to="/help/termsOfUse">{{lang.footUserAgreement}}</router-link></p>
          <p><router-link to="/help/privacyPolicy">{{lang.footPrivacyPolicy}}</router-link></p> -->
          <p><router-link to="/help/digitalAsset">{{lang['footDigitalAssetIntroduction']}}</router-link></p>
        </div>
        <!-- 联系IDCM -->
        <div class="item">
          <h3 v-text="lang.footContactIDCM"></h3>
          <p>{{lang['footCustomerServiceEmail']}}：<a :href="'mailto:' + supportEmail">{{supportEmail}}</a></p>
          <p>{{lang['footBusinessCooperation']}}：<a :href="'mailto:' + businessEmail">{{businessEmail}}</a></p>
          <p v-show="langKey === 'vi'">Facebook: <a href="https://www.facebook.com/idcmvietnam/" target="_blank">IDCM VietNam</a></p>
          <p v-show="langKey === 'vi'">Telegram: <a href="https://t.me/joinchat/HIcGlEZkhqKqqBbDrAOb-g" target="_blank">IDCM Vietnam</a></p>
        </div>
      </div>
      <!-- 图标 -->
      <div class="right">
        <div class="icon" v-if="shareInfo && shareInfo.length > 0">
          <a :class="[item.Code === 'qq' ? qqClass : '']" v-for="(item, index) in shareInfo" :href="item.Code === 'qq' ? 'javascript:void' : item.Content" :key="index" target="_blank">
            <img src="./images/qq.png" v-if="item.Code === 'qq'">
            <img src="./images/fb.png" v-if="item.Code === 'facebook'"/>
            <img src="./images/tel.png"  v-if="item.Code === 'telegram'"/>
            <img src="./images/twitter.png"  v-if="item.Code === 'twitter'"/>
          </a>
          <!-- <a class="qq" href="javascript:;" v-show="langKey !== 'vi'" title="QQ" v-if="customInfo.Share">
            <img src="./images/qq.png">
          </a>
          <a href="https://www.facebook.com/IDCMOFFICIAL/" target="_blank" title="facebook">
            <img src="./images/fb.png" />
          </a>
          <a href="https://t.me/idcmarket" target="_blank" title="Telegram">
            <img src="./images/tel.png" />
          </a>
          <a href="https://twitter.com/IDCM_OFFICIAL" target="_blank" title="Twitter">
            <img src="./images/twitter.png" />
          </a> -->
        </div>
        <div class="app" v-if="customInfo.Download">
          <p>APP</p>
          <img id="bateLogo" v-show="false" src="./images/logo-beta.png" />
          <img id="normalLogo" v-show="false" src="./images/logo-normal.png" />
          <span>
            <i id="footAndroidUrl"></i>
            <img src="./images/andro.png" alt="">
          </span>
          <span>
            <i id="footiOSUrl"></i>
            <img src="./images/apple.png" alt="">
          </span>
        </div>
      </div>
    </section>

    <!-- 友情链接 -->
    <section class="link">
      <span v-text="lang.index_Footer_Link"></span>
      <a :href="item.Link" target="_blank" v-if="friendlyLink.length > 0" v-for="item in friendlyLink" :key="item.ID">{{item.Name}}</a>
      <a href="https://www.jinse.com/" target="_blank" v-text="lang.index_Footer_Golden_Finance" v-if="friendlyLink.length <= 0"></a>
      <a href="http://www.8btc.com/" target="_blank" v-text="lang.index_Footer_Babbitt" v-if="friendlyLink.length <= 0"></a>
    </section>

    <!-- 版权声明 -->
    <section class="copyright">
      {{lang['Disclaimer']}}
      <span>©2017 - 2018 IDC GROUP ALL RIGHTS RESERVED</span>
    </section>
  </footer>
</template>

<script>
import {mapGetters} from 'vuex'
import config from '@/global/config.js'
import EventBus from '@/service/EventBus.js'
export default {
  data () {
    return {
      iOSUrl: '',
      qqClass: 'qq',
      androidUrl: '',
      downloadList: [],
      friendlyLink: [],
      protocolList: []
    }
  },
  props: {
    lang: {},
    langKey: ''
  },
  computed: {
    ...mapGetters({
      customInfo: 'customInfo',
      mixIsAnnouncementShow: 'isAnnouncementShow'
    }),
    // 获取个性化配置分享显示数据
    shareInfo: function () {
      return this.customInfo.Share
    },
    // 设置技术支持Email
    supportEmail: function () {
      return this.customInfo.Contact ? this.customInfo.Contact : 'support@' + `${config.mailDomain}`
    },
    // 设置商务合作Email
    businessEmail: function () {
      return this.customInfo.Cooperation ? this.customInfo.Cooperation : 'business@' + `${config.mailDomain}`
    }
  },
  watch: {
    mixIsAnnouncementShow (val) {

    },
    langKey () {
      this.getAgreement()
    }
  },
  methods: {
    // 获取APP下载链接
    getCode () {
      let self = this
      this.$http.post('Version/All', {})
      .then((res) => {
        if (res) {
          self.downloadList = res || []
          self.downloadUrl(self.downloadList)
        }
      })
    },
    // 获取友情链接
    getLinks () {
      let self = this
      this.$http.post('Links/GetList', {
        pageIndex: 0,
        pageSize: 10
      })
      .then((res) => {
        if (res) {
          self.friendlyLink = res.Data || []
        }
      })
    },
    // 获取协议条款列表
    getAgreement () {
      let self = this
      this.$http.post('Protocol/GetList', {
        LanguageType: self.langKey
      })
      .then((res) => {
        if (res) {
          self.protocolList = res.Data || []
        }
      })
    },
    // 分别获取安卓和iOS
    downloadUrl (data) {
      let self = this
      for (var i = 0; i < data.length; i++) {
        let url = data[i].QRContent
        if (data[i].client_type === 1) {
          if (self.androidUrl === '') {
            self.androidUrl = data[i].QRContent
          }
        } else if (data[i].client_type === 2 && data[i].app_market === 'AppStore') {
          if (self.iOSUrl === '') {
            self.iOSUrl = data[i].QRContent
          }
        }
      }
      this.transParameter()
    },

    // 前端生成二维码和(节点，地址，中间图标)
    createQRCode (id, url, bate) {
      setTimeout (() => {
        $('#' + id).find('canvas').remove()
        $('#' + id).qrcode({
          render: 'canvas',
          quiet: 2,
          size: 140,
          fill: '#000',
          background: '#fff',
          ecLevel: 'H',
          minVersion: 1,
          maxVersion: 40,
          text: url,
          mode: 4,
          image: $('#' + bate)[0],
          mSize: parseInt(12, 12) * 0.02
        })
      }, 0)
    },

    // 传参到二维码插件
    transParameter () {
      let self = this
      self.createQRCode('footAndroidUrl', self.androidUrl, 'normalLogo')  // 谷歌安卓
      self.createQRCode('footiOSUrl', self.iOSUrl, 'normalLogo')  // iOS
    }
  },
  created () {
    EventBus.$on('annLoad', () => {
      let pageBody = document.querySelector('#pageBody')
      if (!pageBody) return // 有些页面没有这个节点
      let windHeight = window.innerHeight
      let bodyHeight = document.body.clientHeight
      let widthSize = windHeight - bodyHeight
      if (widthSize > 0) {
        pageBody.style.minHeight = pageBody.clientHeight + widthSize + 'px'
      }
    })
  },
  mounted () {
    this.getCode()
    this.getLinks()
    this.getAgreement()
  }
}
</script>

<style lang="less">
.pagefooter {
  background: #000B1D;

  section {
    width: 1200px;
    margin: 0 auto;
  }

  /*== 导航 & 图标 ==*/
  .nav {
    display: flex;
    flex-direction: row;
    padding: 60px 0;
    box-sizing: border-box;

    .left {
      display: flex;
      flex-direction: row;
      flex: 1;
      margin-right: 80px;

      .item {
        flex: 1;
        color: #c1c2c3;

        h3 {
          font-size: 16px;
          color: #6F92CE;
          margin-bottom: 20px;
        }
        a {
          display: inline-block;
          margin-bottom: 20px;
          color: #c1c2c3;

          &:hover {
            color: #3782FF;
            transition: all 0.3s;
          }
        }
      }
    }
    .right {
      width: 260px;
      display: flex;
      flex-direction: column;

      .icon {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .qq {
          position: relative;

          &::before {
            content: '';
            position: absolute;
            top: -180px;
            left: 50%;
            width: 174px;
            height: 181px;
            display: none;
            background-image: url('./images/qqrcode.png');
            background-repeat: no-repeat;
            transform: translateX(-50%);
          }
          &:hover::before {
            display: inline-block;
          }
        }
      }

      .app {
        p {
          margin: 20px 0 15px 0;
          color: #3782FF;
          font-size: 12px;
        }
        span {
          margin-right: 20px;
          position: relative;
          display: inline-block;

          i {
            display: inline-block;
            position: absolute;
            width: 138px;
            height: 138px;
            top: -160px;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid #3782FF;
            display: none;

            &::before {
              content: '';
              position: absolute;
              bottom: -11px;
              left: 46%;
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 5px;
              border-color: #3782FF #3782FF transparent transparent;
              transform: rotate(137deg);
              box-shadow: 2px -2px 2px rgba(46, 64, 107, 0.1);
            }
          }

          &:hover i {
            display: block;
          }
        }
      }
    }
  }

  /*== 友情链接 ==*/
  .link {
    color: #6F92CE;
    font-size: 16px;

    a {
      color: #ABB7CE;
      font-size: 14px;
      margin-left: 20px;

      &:hover {
        color: #3782FF;
      }
    }
  }

  /*== 版权声明 ==*/
  .copyright {
    color: rgba(255, 255, 255, 0.4);
    line-height: 22px;
    margin: 0 auto;
    padding: 30px 0;
    font-size: 12px;

    span {
      display: block;
      margin-top: 20px;
      text-align: center;
    }
  }

  @media only screen and (max-width: 1300px) {
    section {
      width: 1000px;
    }
    .nav {
      .left {
        margin-right: 0;
      }
    }
  }

  @media only screen and (max-width: 1200px) {
    .nav {
      .left {
        margin-right: 20px;
      }
      .right {
        width: 180px;
      }
    }
  }

  @media only screen and (max-width: 1100px) {
    section {
      width: 900px;
    }
  }

  @media only screen and (max-width: 1000px) {
    section {
      width: 760px;
    }
  }

}
</style>
